<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="screen-orientation" content="portrait" />
    <meta name="x5-orientation" content="portrait" />
    <meta name="wap-font-scale" content="no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <title>单据</title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/invoice.css"/>
</head>
<body>
<div class="main-page">
    <header class="header">
        <h1 class="title">
            单据
        </h1>
    </header>
    <div class="content">
        <div class="search">
            <div class="select-wrapper label">
                <div class="select-item" id="label" data-id="keyType">单据号</div>
            </div>
            <div class="search-input">
                <input type="text" class="keyWord" id="keyWord" placeholder="请输入单据号"/>
            </div>
        </div>
        <div class="search">
            <div class="select-wrapper" id="mySelect">
                <div class="select-item" id="myTime" data-id="time">今日</div>
                <div class="select-item" id="myType" data-id="BillType">所有类型</div>
                <div class="select-item" id="myNo" data-id="BillNo">全部</div>
                <div class="select-item" id="myStatuse" data-id="BillStatuse">所有状态</div>
            </div>
        </div>
        <div class="select-content" data-id="myType" id="BillType">
            <ul class="option-list">
                <li class="option active">所有类型</li>
                <li class="option">消费</li>
                <li class="option">充值</li>
            </ul>
        </div>
        <div class="select-content" data-id="myTime" id="time">
            <ul class="option-list">
                <li class="option active">今日</li>
                <li class="option">昨日</li>
                <li class="option">本周</li>
                <li class="option">上周</li>
                <li class="option">本月</li>
                <li class="option">上月</li>
                <li class="option">自定义</li>
            </ul>
        </div>
        <div class="select-content" data-id="myNo" id="BillNo">
            <ul class="option-list">
                <li class="option active">全部</li>
                <li class="option">10000</li>
            </ul>
        </div>
        <div class="select-content" data-id="myStatuse" id="BillStatuse">
            <ul class="option-list">
                <li class="option active">所有状态</li>
                <li class="option">正常</li>
                <li class="option">退单</li>
            </ul>
        </div>
        <div class="select-content label" data-id="label" data-input="keyWord" id="keyType">
            <ul class="option-list">
                <li class="option active">单据号</li>
                <li class="option">卡号/手机号</li>
            </ul>
        </div>
        <!--没有数据时在类名为data-wrapper的div上加上类名noData-->
        <div class="data-wrapper" >
            <h2 class="title">今日，共<span class="red">1</span>笔 <span class="red">1</span>元</h2>
            <ul class="data-list">
                <li class="data-item">
                    <div class="left">
                        <img src="images/zhifubao.png">
                    </div>
                    <div class="right">
                        <p><span class="">XF2465646466451</span><span class="text-right price">￥22.0</span></p>
                        <p class="grey"><span>2017-09-10 19:00</span><span class="text-right">订单原价：￥22.0</span></p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <nav class="footer-nav">
        <a href="javascript:;" class="tap-item">
            <span class="icon-nav nav-index"></span>
            <span class="text">首页</span>
        </a>
        <a href="javascript:;" class="tap-item active">
            <span class="icon-nav nav-invoice"></span>
            <span class="text">单据</span>
        </a>
        <a href="javascript:;" class="tap-item">
            <span class="icon-nav nav-message"></span>
            <span class="text">消息</span>
        </a>
        <a href="javascript:;" class="tap-item">
            <span class="icon-nav nav-user"></span>
            <span class="text">我的</span>
        </a>
    </nav>
</div>
<script type="text/javascript" src="js/invoice.js"></script>
</body>
</html>